<template>
  <a-input-group compact v-if="alignVal">
    <a-select
      :value="alignVal.type"
      @change="selectChange"
      class="hv-align-input-left"
      dropdownClassName="hv-dark-select-dropdown"
    >
      <a-select-option
        :value="item.value"
        v-for="(item, index) in alignTypeListConst"
        :key="index"
      >
        {{ item.label }}
      </a-select-option>
    </a-select>

    <a-input-number
      :value="alignVal.value"
      v-if="alignTypeConst.value === alignVal.type"
      @change="emitValue"
      class="hv-align-input-right"
      :min="0"
      :max="999"
      :step="1"
      size="small"
    />

    <a-select
      :value="alignVal.value"
      v-if="alignTypeConst.option === alignVal.type"
      @change="emitValue"
      class="hv-align-input-right"
      dropdownClassName="hv-dark-select-dropdown"
    >
      <a-select-option
        :value="item.value"
        v-for="(item, index) in alignListConst"
        :key="index"
      >
        {{ item.label }}
      </a-select-option>
    </a-select>
  </a-input-group>
</template>

<script lang="ts" setup>
import type { PropType } from "vue";
import {
  alignTypeListConst,
  alignTypeConst,
  alignListConst,
} from "@/visual/commons/consts/dashboard-const";

const props = defineProps({
  alignVal: {
    type: Object as PropType<{
      type: string;
      value: string;
    }>,
    default: () => {
      return {
        type: "",
        value: "",
      };
    },
  },
});

const emit = defineEmits(["update:alignVal"]);

const selectChange = (value: string) => {
  const alignValue = alignTypeConst.value === value ? "0" : alignListConst[0].value;

  emit("update:alignVal", {
    type: value,
    value: alignValue,
  });
};

const emitValue = (value: string) => {
  emit("update:alignVal", {
    type: props.alignVal.type,
    value,
  });
};
</script>

<style lang="less" scoped>
@import "./AlignInput.less";
</style>
